<template>
	<view class="doctor">
		<Navigation title="医生列表" background="#fff" />
		<view class="search ph-32 pv-12 h-88">
			<view class="w-686 h-64 search-box">
				<u-search placeholder="请输入您想要搜索的内容" v-model="listParams.keyword" bgColor="#F5F5F5" height="32"
					:showAction="false" searchIconColor="#CCCCCC" placeholderColor="#CCCCCC" :clearabled="false"
					@search="handleSearch"></u-search>
				<view class="text fs-30 text-color4 w-108" @click="handleSearch">搜索</view>
			</view>
		</view>
		<view class="w-f h-80 f ai-c jc-s-b screen pl-28 pr-32">
			<view class="f ai-c" @click="selectDepartment">
				<view class="fs-28 text-color4">{{ departmenOptText?departmenOptText:departmentText[departmentCurt] }}</view>
				<image src="http://cwht.ricecs.cn/app/index/down.png" class="w-12 h-12 ml-12"></image>
			</view>
			<view class="f ai-c" @click="handleScreen">
				<image src="http://cwht.ricecs.cn/app/index/screen.png" class="w-28 h-28 mr-4"></image>
				<view class="fs-28 text-color4">{{ curt == null ? '筛选' : consultList[curt] }}</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="list ph-20" style='margin-bottom: 100rpx;'>
			<view class="mt-20 list-box b-24 f jc-s-b ph-28 pv-28" v-for="(item, index) in list" :key="index"
				@click="toDetail(item)">
				<image :src="item.avatar" class="w-120 h-120 b-12 mr-20"></image>
				<view class="f f1 fd-c">
					<view class="f jc-s-b ai-c">
						<view class="f ai-c">
							<view class="fs-30 fw-600 text-color4 mr-12">{{ item.name }}</view>
							<view class="fs-20 w-52 h-28 ai-c jc-c mr-8 b-4 voice" v-show="item.voiceConsultation">语音</view>
							<view class="fs-20 w-52 h-28 ai-c jc-c mr-8 b-4 imageText" v-show="item.imageConsultation">图文</view>
							<view class="fs-20 w-52 h-28 ai-c jc-c b-4 tel" v-show="item.phoneConsultation">电话</view>
						</view>
						<view class="w-158 h-56 b-56 f ai-c jc-c ask" v-show="item.onlineStatus == 1">
							<image src="http://cwht.ricecs.cn/app/index/ask.png" class="w-24 h-24 mr-8"></image>
							<view class="fs-26 text-color5">问医生</view>
						</view>
						<view class="w-158 h-56 b-56 f ai-c jc-c rest" v-show="item.onlineStatus != 1">
							<image src="http://cwht.ricecs.cn/app/index/rest.png" class="w-24 h-24 mr-8"></image>
							<view class="fs-26 text-color3">休息中</view>
						</view>
					</view>
					<view class="f mt-12">
						<view class="fs-26 text-color2 mr-8">评分</view>
						<view class="fs-26 fw-600 text-color mr-24">{{item.scores||0}}</view>
						<view class="fs-26 text-color2 mr-8">累计接诊</view>
						<view class="fs-26 fw-600 text-color mr-24">{{item.orderNum||0}}</view>
					</view>
					<view class="fs-24 text-color4 text-ellipsis-1 mt-12">{{ item.labelNames }}</view>
					<view class="mt-12 f ai-c">
						<view class="fs-24 text-color3">执业编号：</view>
						<view class="fs-24 text-color4">{{ item.licenseNo }}</view>
					</view>
					<view class="mt-12 f ai-c">
						<view class="fs-24 text-color3">执擅长：</view>
						<view class="fs-24 text-color4">{{ item.skillingRemark }}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<u-picker :show="show" :columns="departmentList" keyName="label" @cancel="show=false" @confirm="onfirm"></u-picker>
	</view>
</template>
<script setup lang="ts">
	import { ref } from 'vue';
	import { onLoad, onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
	import { doctorPage } from '@/services/api/index/index';
	import { dictDataType } from '@/services/api/dict';
	const list = ref<any[]>([]);
	const listParams = ref<any>({
		pageNo: 1,
		pageSize: 10,
		keyword: '',
		department: '',
		imageConsultation: null,
		voiceConsultation: null,
		phoneConsultation: null
	});
	const departmentList = ref<any[]>([]);
	const departmentText = ref([]);
	const departmentCurt = ref(0);
	const departmenOptText = ref('');
	const consultList = ['筛选', '图文咨询', '语音咨询', '视频咨询'];
	const ksList = ref<any[]>([])
	const show = ref(false)
	const curt = ref<number | null>(null);
	onLoad((option : any) => {
		if (option.department) {
			if (option.name == '全部') {
				listParams.value.department = '';
			} else {
				listParams.value.department = option.name;
			}

			departmenOptText.value = option.name;
		}
	});
	onShow(() => {
		list.value = [];
		listParams.value.pageNo = 1;
		getList();
		getDictDataType();
	});


	async function getDictDataType() {
		const { data } = await dictDataType({ type: 'common_doctor_dept' });
		data.unshift({ id: 0, label: '全部', value: '' })
		departmentList.value = [data];
		departmentText.value = data.map((item : any) => {
			return item.label;
		});
	}
	async function getList() {
		const { data } = await doctorPage(listParams.value);
		uni.stopPullDownRefresh();
		data.list.forEach((item : any) => {

			item.scores = item.scores ? Number(item.scores).toFixed(1) : 0
		});

		list.value = list.value.concat(data.list);
	}
	function onfirm(e) {
		departmenOptText.value = ''
		departmentCurt.value = e.indexs[0];
		listParams.value.department = departmentList.value[0][departmentCurt.value].value;
		list.value = [];
		listParams.value.pageNo = 1;
		getList();
		show.value = false
	}
	function handleSearch() {
		list.value = [];
		listParams.value.pageNo = 1;
		getList();
	}
	function selectDepartment() {
		show.value = true
	}
	function handleScreen() {
		uni.showActionSheet({
			itemList: consultList,
			success: function (res : any) {
				curt.value = res.tapIndex;
				if (curt.value == 0) {
					listParams.value.imageConsultation = null;
					listParams.value.voiceConsultation = null;
					listParams.value.phoneConsultation = null;
				} else if (curt.value == 1) {
					listParams.value.imageConsultation = true;
					listParams.value.voiceConsultation = null;
					listParams.value.phoneConsultation = null;
				} else if (curt.value == 2) {
					listParams.value.imageConsultation = null;
					listParams.value.phoneConsultation = true;
					listParams.value.voiceConsultation = null;
				} else if (curt.value == 3) {
					listParams.value.imageConsultation = null;
					listParams.value.phoneConsultation = null;
					listParams.value.voiceConsultation = true;
				}
				list.value = [];
				listParams.value.pageNo = 1;
				getList();
			},
		});
	}
	function toDetail(data : any) {
		uni.navigateTo({
			url: `/pages_index/doctorDetail?id=${data.id}`,
		});
	}
	//下拉刷新
	onPullDownRefresh(() => {
		list.value = [];
		listParams.value.pageNo = 1;
		getList();
	});
	//上拉加载
	onReachBottom(() => {
		listParams.value.pageNo++;
		getList();
	});
</script>
<style lang="scss" scoped>
	.doctor {
		background: #f5f5f5;
		min-height: 100vh;

		.list {
			height: calc(100vh - 168rpx);

			.list-box {
				background: #fff;

				.ask {
					background: #fabb3c;
				}

				.rest {
					background: #f0f0f0;
				}

				.voice {
					background: #fff9e6;
					color: #fac519;
					text-align: center;
				}

				.imageText {
					background: #f0f2f5;
					color: #5769a0;
					text-align: center;
				}

				.tel {
					background: #edf2ff;
					color: #4974f5;
					text-align: center;
				}
			}
		}

		.screen {
			background: #fff;
		}

		.search {
			background: #fff;

			.search-box {
				position: relative;

				.text {
					position: absolute;
					right: 0rpx;
					top: 11rpx;
					z-index: 1;
					text-align: center;
				}

				.text::after {
					content: '';
					position: absolute;
					left: 0rpx;
					top: 7rpx;
					width: 1px;
					height: 32rpx;
					background: #dddddd;
				}
			}
		}

		::v-deep .u-search__content {
			border-radius: 8rpx !important;
		}

		::v-deep .u-search__content {
			justify-content: flex-start !important;
		}

		::v-deep .u-search__content__input {
			width: 80%;
			flex: none !important;
		}
	}
</style>